<template>
    <div class="feewrap">
		<div class="totalinfo">
		    <van-row>
		        <van-col span="6">
		            <div class="cell-title nor">
		                <p class="title">总应收 :</p>
		            </div>
		        </van-col>
		        <van-col span="18">
		            <div class="cell-title">
		                <p class="title"><span>￥ {{allreceipt}}</span></p>
		            </div>
		        </van-col>
		    </van-row>
		</div>
        <div class="ahead">
            <van-row>
                <van-col span="6">
                    <div class="cell-title">
                        <p class="title">名目</p>
                    </div>
                </van-col>
                <van-col span="4">
                    <div class="cell-title">
                        <p class="title">应收</p>
                    </div>
                </van-col>
                <van-col span="14">
                    <div class="cell-title">
                        <p class="title">备注</p>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="abody">
            <div class="row-item-wrap" v-for="(item,index) in feelist" :key='index'>
                <van-row>
                    <van-col span="6">
                        <div class="item-cell">
                            {{item.BillUse}}
                        </div>
                    </van-col>
                    <van-col span="4">
                        <div class="item-cell">
                            <span>{{item.receipt}}</span>
                        </div>
                    </van-col>
                    <van-col span="14">
                        <div class="item-cell">
                            {{item.remarkByReceipt}}
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "feewrap2",
    components: {

    },
    props:['feelist'],
    data() {
        return {
        }
    },
	computed:{
	    allreceipt(){
	        var count =0;
	        this.feelist.forEach((f)=>{
	            var rcm = Number(f.receipt)*10000;
	            count+=rcm;
	        })
	        return (count/10000).toFixed(2);
	    }
	},
    methods:{
        
    },
    mounted:function(){
        
    }
};
</script>

<style lang="less" scoped>
.feewrap{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding-top: .2rem;
    .totalinfo{
        width: 100%;
        height: 1rem;
        text-align: left;
        border-top: 1px solid #eee;
        .cell-title{
            color: #666;
            font-size: .34rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            span{
                color: #f0464e;
                font-size: .4rem;
                font-weight: bold;
            }
        }
    }
    .ahead{
        border-bottom: 1px solid #eee;
        .cell-title{
            color: #63A35C;
            font-size: .34rem;
            height: 1rem;
            border: 1px solid #eee;
            line-height: 1rem;
            text-align: center;
            .vanicon{
                display: inline-block;
                vertical-align: middle;
            }
        }
        .cell-title.double{
            height: 2rem;
            line-height: 2rem;
        }
        .nor{
            border-right: none;
        }
        .nob{
            border-bottom: none;
        }
    }
    .abody{
        width: 100%;
        height: auto;
        .row-item-wrap{
            border-bottom: 1px solid #eee;
            .item-cell{
                text-align: center;
                font-size: .34rem;
                color: #666;
                box-sizing: border-box;
                padding: .3rem .1rem;
                span{
                    color: #f0464e;
                }
            }
            .head{
                width: 25%;
            }
            .tail{
                width: 18.75%;
            }
            .clearfloat{
                clear: both;
            }
        }
    }
}
</style>
